<template>
  <div class="left_container">
    <div class="left_top">
      {{ sign }} 浮选机
    </div>
    <div class="left_bottom">
      <div class="left_contant">
        <div class="left_item tb_th" v-for="(item, index) in colmunT" :key="index">{{ item.item }}</div>
      </div>
      <div class="right_contant">
        <!-- 第一行 -->
        <div class="row_box">
          <div class="row_box_item tb_tr" v-for="(item, index) in rowTitle" :key="index">{{ item.item }}</div>
        </div>
        <!-- 第二行 -->
        <div class="row_box">
            <div class="row_box_item tb_val"  style="background:#000"  v-for="(item, index) in feedback(sign)" :key="index">{{ item }}</div>
        </div>
        <!-- 第三行 -->
        <div class="row_box">
            <div class="row_box_item tb_val" style="background:#fff" v-for="(item, index) in given(sign)" :key="index">{{ item }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { rowT, colmunT } from "./data";
export default {
  props:{
      real:{
          type:Object
      },
      //设备位号
      sign:{
        tyoe:String
      }
  },
  computed:{
    // 反馈数据
      feedback(){
          return function(name){ // eslint-disable-line no-unused-vars
          var feedback=[]
            for(var key in this.real){
              var filterData = "fx_" + name + "_fk"
              if(key.indexOf(`${filterData}`) != -1){
                  feedback.push(this.real[key].toFixed(2))
              }
            }
            return feedback
          }
      },
      // 给定数据
      given(){
        return function(name){
          var given = []
          for(var key in this.real){
              var filterData = "fx_" + name + "_gd"
              if(key.indexOf(`${filterData}`) != -1){
                  given.push(this.real[key].toFixed(2))
              }
            }
            return given
        }
      }
  },
  data() {
    return {
      rowT,
      colmunT,
    };
  },
  created() {
    this.rowTitle = this.rowT();
  },
};
</script>
<style lang="scss" scoped>
.left_container {
  width: 100%;
  height: 100%;
  color:rgb(221, 212, 212);
  padding: 0.2rem 0.1rem;
  border: 1px solid #00def8;
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.left_top{
  text-align: center;
  font-size: 0.2rem;
  font-weight: bold;
  height: 15%;
  line-height: 15%;
}
.left_bottom{
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  align-items: top;
}
.left_contant{
  width:calc(100% / 17);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.left_item{
  padding: 0.05rem 0;
}
.right_contant{
  width: 93%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.row_box{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}
.row_box_item{
    width: calc(100% / 17);
    text-align: center;
    font-size: 0.2rem;
    padding: 0.05rem;
    box-sizing: border-box;
}
.tb_th,.tb_tr{
  font-weight: bold;
}
.tb_th{
  font-size: 0.17rem;
}
.tb_tr{
  font-size: 0.2rem;
}
.tb_val{
  color: #52c41a;
  font-weight: 600;
}
</style>